<template>
  <view class="home-training home-panel">
    <view class="panel-header">
      <text class="panel-header--title">培训活动</text>
    </view>
    <view class="panel-body">
      <swiper
        class="training-swipe"
        :indicator-dots="swiper.indicatorDots"
        :autoplay="swiper.autoplay"
        :interval="swiper.interval"
        :duration="swiper.duration"
        indicator-active-color="#f54305"
        indicator-color="#d9d9d9"
        ref="mySwiper"
        @change="activeIndex = $event.detail.current"
      >
        <!-- slides -->
        <swiper-item v-for="(item, $index) in list" :key="$index">
          <uiGrid :columnNum="2" gutter="22" class="trainings-container">
            <uiGridItem
              class="trainings-item"
              boxClass="actions-item"
              v-for="activity in item"
              :key="activity.activity.activityId"
            >
              <template v-slot:content>
                <view @click="handleClickActivityById(activity.activity)">
                  <view class="training-container">
                    <view class="training-header">
                      <image
                        class="training-header--image"
                        :src="activity.activity.activityPic"
                        alt
                      />
                    </view>
                    <view class="training-main">
                      <view
                        class="training-main--name ui-ellipsis--l2"
                      >{{ activity.activity.activityName }}</view>
                      <view class="training-main--desc">
                        <span
                          class="training-main--time"
                        >{{activity.activity.createTime | date_format('M月D日')}}</span>
                        <span
                          class="training-main--address ui-ellipsis"
                        >{{activity.activity.activityAddress}}</span>
                      </view>
                    </view>
                  </view>
                </view>
              </template>
            </uiGridItem>
          </uiGrid>
        </swiper-item>
        <view class="swiper-pagination" slot="pagination"></view>
      </swiper>
      <view class="swiper-pagination">
        <view class="indicator-dots">
          <view
            class="swiper-pagination-bullet"
            :class="{ 'swiper-pagination-bullet-active' : activeIndex === $index}"
            v-for="(item, $index) in list"
            :key="$index"
          ></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getActivitiesAPI } from "api/order/activities.js";
import uiGrid from "@/components/base/grid/index.vue";
import uiGridItem from "@/components/base/grid-item/index.vue";

export default {
  name: "HomeTraining",
  components: { uiGrid, uiGridItem },
  props: {},
  "mp-weixin": {
    options: {
      multipleSlots: true, // 在组件定义时的选项中启用多slot支持
      styleIsolation: "shared" //  这个选项等价于设置 styleIsolation: apply-shared ，但设置了 styleIsolation 选项后这个选项会失效。
    }
  },
  data() {
    return {
      list: [],
      page: {
        currentPage: 1,
        pageNumber: 12,
        totalNumber: 0,
        totalPage: 1
      },
      swiper: {
        indicatorDots: false,
        autoplay: false,
        interval: 2000,
        duration: 500
      },
      activeIndex: 0
    };
  },
  created() {
    this.loadRecommended();
  },
  mounted() {},
  methods: {
    handleClickActivityById(item) {
      this.$router.push({
        path: `/activity/detail/${item.activityId}`,
        query: {
          sid: this.$route.query.sid
        }
      });
    },
    handleClickGotoLession() {
      this.$router.push(`/lession`);
    },
    // 重新加载一批数据
    handleClickReload() {
      // 处理当前页 如果小于最大页数则增加 否则变成第一页
      if (this.page.currentPage >= this.page.totalPage) {
        this.page.currentPage = 1;
      } else {
        this.page.currentPage++;
      }
      this.loadRecommended();
    },
    // 加载推荐的课程
    loadRecommended() {
      var params = {
        ...this.page
      };
      var self = this;
      let reSetData = (dataList, num) => {
        let arr = [];
        let len = dataList.length;
        for (let i = 0; i < len; i += num) {
          arr.push(dataList.slice(i, i + num));
        }
        return arr;
      };
      getActivitiesAPI(params).then(({ respCode, respMsg, result }) => {
        if (respCode !== "0") {
          // 加载失败
          this.isloading = false;
          this.$toast.fail(respMsg);
          return;
        }
        self.list = reSetData(result.list, 4);
        this.page.totalPage = result.page.totalPage;
      });
    }
  }
};
</script>
<style lang="scss">
.home-training {
  position: relative;

  width: 100%;
  background-color: #fff;
  margin-top: 16rpx;
  box-sizing: border-box;
  .panel-body {
    padding: 0 8rpx;
  }
  .swiper-container {
    width: auto !important;
  }
  .training-swipe {
    height: 800rpx;
  }

  .trainings-container {
    position: relative;
    clear: both;
    display: inline-block;
    width: 734rpx;
    height: 732rpx;
    box-sizing: border-box;
    >>> .actions-item {
      float: left;
      width: 334rpx;
      margin-bottom: 20rpx;
      overflow: hidden;
    }
    // #ifdef MP-WEIXIN
    >>> .trainings-item {
      margin-bottom: 20rpx;
      overflow: hidden;
      width: 50%;
    }
    // #endif
  }
  .training-container {
    width: 334rpx;
    height: 356rpx;
    background-color: #ffffff;
    border-radius: 8rpx;
    border: solid 1rpx #ededed;
    box-sizing: border-box;
    .training-header {
      position: relative;
      top: -1rpx;
      left: -2rpx;
      right: -1rpx;
      width: 336rpx;
      height: 199rpx;
      overflow: hidden;
      border-top-right-radius: 8rpx;
      border-top-left-radius: 8rpx;
      overflow: hidden;
      .training-header--image {
        width: 100%;
        border-top-right-radius: 8rpx;
        border-top-left-radius: 8rpx;
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }
    }
    .training-main {
      padding: 20rpx;
      .training-main--name {
        font-size: 28rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: #2c2c35;
      }
      .training-main--desc {
        display: flex;
        justify-content: space-between;
        font-size: 22rpx;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: #aeafc0;
        margin-top: 25rpx;
        .training-main--time {
        }
        .training-main--address {
        }
      }
    }
  }
  .swiper-container {
    padding-bottom: 38rpx;
  }
}
</style>
